<template>
  <view :class="[`${prefixCls}-env-config-container`]">
    <uv-button type="primary" shape="circle" customStyle="width: 30px; height: 30px; opacity: 0;" @click="openPopup"></uv-button>
  </view>
  <uv-popup ref="envConfigPopup" :safeAreaInsetTop="true" round="10px" @maskClick="onClickMask" @touchmove.stop.prevent="">
    <view class="env-config-container">
      <view class="header">切换数据环境</view>
      <view class="body">
        <uv-radio-group v-model="curEnv" borderBottom placement="column" iconPlacement="right">
          <uv-radio :name="k" :label="k" v-for="(v, k) of envConfigMap" :key="k" customStyle="margin-bottom:12px;"></uv-radio>
        </uv-radio-group>
      </view>
      <view class="footer">
        <uv-button type="primary" shape="circle" @click="onConfirm">确认切换</uv-button>
        <uv-text type="info" size="28rpx" align="center" :customStyle="{ marginTop: '20rpx' }" text="取 消" @click="closePopup" />
      </view>
    </view>
  </uv-popup>
</template>

<script>
import { setStorageCache } from '@/common/cache'
import { mapGetters, mapActions, mapMutations } from 'vuex'
export default {
  name: 'envConfig',
  components: {},
  mixins: [],
  props: {},
  data() {
    return {
      count: 0,
      curEnv: '',
      envConfigMap: ENV_CONFIG_MAP,
    }
  },
  // 侦听属性
  watch: {},
  // 计算属性
  computed: {
    ...mapGetters(['DefEnvCon']),
  },

  created() {},
  mounted() {},
  destroyed() {},
  methods: {
    ...mapActions('app', ['SetAppInitInfo']),
    ...mapMutations('system', ['SET_DEF_ENV_CON']),
    openPopup() {
      this.count++
      if (this.count >= 7) {
        this.curEnv = this.DefEnvCon.MODE
        this.$refs.envConfigPopup.open()
      }
    },
    closePopup() {
      this.count = 0
      this.$refs.envConfigPopup.close()
    },

    onClickMask() {
      this.count = 0
    },

    onConfirm() {
      const envConfig = this.envConfigMap[this.curEnv]
      this.SET_DEF_ENV_CON(envConfig)
      setStorageCache('Env-Config', envConfig)
      this.closePopup()
      this.SetAppInitInfo(false)
      this.$ROUTE.goHome()
    },
  },
}
</script>

<style lang="scss" scoped>
.env-config-container {
  width: 400rpx;
  position: relative;
  padding: 40rpx 50rpx;
  @include flex(column);
  justify-content: space-between;
  .header {
    margin-bottom: 30rpx;
    text-align: center;
    font-size: 32rpx;
    color: $uv-main-color;
    font-weight: 600;
  }
  .body {
    font-size: 32rpx;
  }
  .footer {
    margin-top: 40rpx;
  }
}
</style>
